<template>
  <div class="body">
    <el-container>
      <!-- <el-header>Header</el-header> -->
      <el-main>
        <!-- 创客研发中心标题 -->
        <el-row :gutter="20" class="title-text">
          <el-col :span="24">
            <div class="grid-content bg-purple">创客研发中心</div>
          </el-col>
        </el-row>
        <!-- 创客实验室已经研发了x个产品 -->
        <el-row :gutter="20" class="">
          <el-col :span="24">
            <div class="grid-content bg-purple produce_number_show"> 创客实验室已经研发了{{this.producttotal}}个产品</div>
          </el-col>
        </el-row>
        <!-- 搜索框加选项框 -->
        <el-row :gutter="20" class="find_and_choice">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div class="demo-input-suffix">
                <el-input placeholder="请输入内容" v-model="input2" clearable @blur="selectblur" @change="selectproduct">
                  <el-button slot="append" icon="el-icon-search" @click="selectproduct"></el-button>
                </el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-select v-model="value" clearable placeholder="请选择" @change="handleSelectChange">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <div class="noselect" v-if="isselect==0">
          <!-- 标杆产品标题 -->
          <el-row :gutter="20" class="">
            <el-col :span="24">
              <div class="grid-content bg-purple title2">标杆产品</div>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <!-- 标杆产品内容 -->
          <div class="block">
            <el-carousel trigger="click" :height="carouselHeight" :autoplay="false" :interval="0" class="products">
              <el-carousel-item v-for="(page, pageIndex) in carouselData" :key="pageIndex">
                <!-- 每页包含两行三列 -->
                <div class="carousel-content">
                  <el-row :gutter="20">
                    <el-col v-for="(product, colIndex) in page.firstRow" :key="colIndex" :xs="12" :sm="8" :md="6"
                      :lg="4" :xl="4">
                      <div class="carousel-item" @click="toProductDetail(product.productId)">
                        <img :src="product.pictureUrl" :alt="product.productName" class="product-image" />
                        <div class="product-description">{{ product.productName }}</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 优秀作品标题 -->
          <el-row :gutter="20" class="">
            <el-col :span="24">
              <div class="grid-content bg-purple title3">优秀作品展示</div>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <!-- 优秀作品内容 -->
          <div>
            <el-row :gutter="20" v-for="(item, index) in otherProducts" :key="index">
              <!-- 左边的图片 -->
              <el-col :span="8">
                <div class="grid-content bg-purple good_produce_picture">
                  <div class="carousel-item" @click="toProductDetail(item.productId)">
                    <img :src="item.pictureUrl" alt="产品图片" class="product-image" />
                  </div>
                </div>
              </el-col>
              <!-- 右边的内容 -->
              <el-col :span="16">
                <!-- 第一行文字，分成两部分 -->
                <el-row>
                  <el-col :span="4">
                    <div class="grid-content bg-purple good_produce_category">{{ statusMap[item.productType] }}</div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple good_produce_name">{{ item.productName }}</div>
                  </el-col>
                </el-row>
                <!-- 第二行文字 -->
                <el-row>
                  <el-col :span="24">
                    <div class="grid-content bg-purple good_produce_describe">{{ item.productDetails }}</div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="isselect" v-if="isselect==1">
          <el-divider></el-divider>
          <div class="block">
            <el-carousel trigger="click" :height="carouselHeight" autoplay="false" interval="0" class="products">
              <el-carousel-item v-for="(page, pageIndex) in carouselData" :key="pageIndex">
                <!-- 每页包含两行三列 -->
                <div class="carousel-content">
                  <el-row :gutter="20">
                    <el-col v-for="(product, colIndex) in page.firstRow" :key="colIndex" :xs="12" :sm="8" :md="6"
                      :lg="4" :xl="4">
                      <div class="carousel-item" @click="toProductDetail(product.productId)">
                        <img :src="product.pictureUrl" :alt="product.productName" class="product-image" />
                        <div class="product-description">{{ product.productName }}</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </el-main>
    </el-container>

  </div>
</template>

<script>
// import { from } from 'core-js/core/array';
import request from '@/utils/request'

// import { productcenter } from "@/api/portal";
import axios from 'axios';
export default {
  data() {
    return {

      input1: '',
      input2: '',
      input3: '',
      input4: '',
      options: [{
        value: '1',
        label: '全部'
      }, {
        value: '2',
        label: '小程序'
      }, {
        value: '3',
        label: 'WEB'
      }, {
        value: '4',
        label: 'APP'
        }],
      // 当前选中的值
      value: '全部',
      // 当前选择的选项
      selectedOption: '1',
      // 筛选后的产品数据
      filteredProducts: [],
      // 展示到页面的最终数据，经过了分组
      carouselData: [
        {
        },
        // 可以继续添加更多的页数据
      ],
      items: [
        {
          image: 'https://via.placeholder.com/300',
          text1: 'APP',
          text2: '第二部分文字 1',
          text3: '第三部分文字 1'
        },
        {
          image: 'https://via.placeholder.com/300',
          text1: 'WEB',
          text2: '第二部分文字 2',
          text3: '第三部分文字 2'
        },
        {
          image: 'https://via.placeholder.com/300',
          text1: '小程序',
          text2: '第二部分文字 3',
          text3: '第三部分文字 3'
        },
        // 添加更多项
      ],
      topProducts: [],
      otherProducts: [],
      products: [],
      // 研发产品总数
      producttotal: '0',
      itemsPerRow: 8,
      carouselHeight: '1100px', // 用来设置 carousel 高度的属性
      isselect:0
      // productList:[]
    }

  },
  mounted() {
    this.getProducts(); // 组件挂载后调用
    this.updateItemsPerRow(); // 初始化时根据窗口大小设置产品每行数量和高度
    window.addEventListener("resize", this.onResize); // 监听窗口大小变化
  },
  created() {
    // this.updateCarouselData(); // 初始化产品数据
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize); // 清理监听
  },
  computed: {
    // 状态映射表
    statusMap() {
      return {
        1: 'WEB',
        2: 'APP',
        3: '小程序'
      };
    }
  },
  methods: {
    // 跳转到详情页
    toProductDetail(productId) {
      console.log(productId)
      this.$router.push({ path: `/RDcenter/produce_detail`, query: { productId } })
    },
    // 获取所有产品
    getProducts() {
      axios({
        method: 'get',
        url: 'http://121.43.55.236:8081/productCenter/getProducts',
      }).then(response => {
        this.topProducts = [];
        this.otherProducts = [];
        this.product = response.data.data.record;

        this.producttotal = response.data.data.total;
        console.log(response.data.data);
        // 分类处理产品
        response.data.data.record.forEach(product => {
          if (product.top) {
            this.topProducts.push(product);  // 标杆产品
          } else {
            this.otherProducts.push(product);  // 优秀作品展示
          }
        });
        // 数据获取后，调用 updateCarouselData 来更新 carouselData
        this.updateCarouselData();
      }).catch(error => {
        console.error('请求失败:', error);
        // 可以添加失败处理逻辑
      });
    },
    // 模糊查询所有产品
    selectproduct() {
      if (this.input2 != '' || this.input2 != null) {
        console.log("开始查询");
        axios({
          method: 'post',
          url: 'http://121.43.55.236:8081/productCenter/findPrdByNameOrPrdName',
          data: {
            searchWord: this.input2
          }
        }).then(response => {
          this.topProducts = [];
          this.otherProducts = [];
          this.product = response.data.data.record;
          this.isselect = 1;

          // 不处理产品，直接全放到标杆产品里
          response.data.data.record.forEach(product => {
            this.topProducts.push(product);  // 标杆产品
          });
          // 数据获取后，调用 updateCarouselData 来更新 carouselData
          this.updateCarouselData();
          console.log(this.topProducts);

        }).catch(error => {
          console.error('请求失败:', error);
          // 可以添加失败处理逻辑
        });
      }
      else {
        this.isselect = 0;
      }
    },
    // 搜索框失去焦点且内容为空，返回初始页面
    selectblur() {
      if (this.input2 == '' || this.input2 == null) {
        // 修改是否为查询页面变量
        this.isselect = 0
        this.getProducts();
        this.value = '全部';
        console.log("搜索框失去焦点")
      }

    },
    // 更新每行产品的数量
    onResize() {
      this.updateItemsPerRow();
      this.updateCarouselData(); // 重新分配数据
    },
    // 根据当前窗口大小更新每行显示多少个产品
    updateItemsPerRow() {
      const width = window.innerWidth;
      // 更新每行产品数量
      if (width < 768) {
        this.itemsPerRow = 6; // 小屏幕，每行6个
        this.carouselHeight = '1200px'; // 小屏幕时设置高度
      } else if (width >= 768 && width < 992) {
        this.itemsPerRow = 9; // 小平板，每行9个
        this.carouselHeight = '930px'; // 中等屏幕时设置高度
      } else if (width >= 992 && width < 1200) {
        this.itemsPerRow = 12; // 大平板，每行16个
        this.carouselHeight = '900px'; // 更大的屏幕时设置高度
      }
      else if (width >= 1200 && width < 1500) {
        this.itemsPerRow = 24; // 大平板，每行16个
        this.carouselHeight = '950px'; // 更大的屏幕时设置高度
      } else if (width >= 1500 && width < 1900) {
        this.itemsPerRow = 18; // 大屏幕，每行24个
        this.carouselHeight = '900px'; // 大屏幕时设置高度
      } else if (width >= 1900) {
        this.itemsPerRow = 12; // 大屏幕，每行24个
        this.carouselHeight = '900px'; // 大屏幕时设置高度
      }
      // console.log(`当前每行显示 ${this.itemsPerRow} 个产品`);
    },
    // 填充 carouselData，确保每行的数量是动态的
    // 更新 carousel 数据
    updateCarouselData() {
      console.log(this.value)
      if (this.value == '1' || this.value == '全部' || this.value == null) {
        // 创建 carouselData 并填充
        const tempData = [...this.topProducts]; // 创建副本避免修改原数据
        const carouselData = [];
        // console.log(this.topProducts);
        // 按照 itemsPerRow 的数量分组填充 carouselData
        while (tempData.length > 0) {
          const firstRow = tempData.splice(0, this.itemsPerRow); // 每次取出 itemsPerRow 个产品
          carouselData.push({ firstRow }); // 将 firstRow 放入 carouselData
        }
        // 更新 carouselData
        this.carouselData = carouselData;
        // console.log(this.carouselData.firstRow);
        // console.log('更新后的 carouselData:', this.carouselData);
      } else {
        // 如果选择了选项，就就展示过滤后的数据
        const tempData = [...this.filteredProducts]; // 创建副本避免修改原数据
        const carouselData = [];
        while (tempData.length > 0) {
          const firstRow = tempData.splice(0, this.itemsPerRow); // 每次取出 itemsPerRow 个产品
          carouselData.push({ firstRow }); // 将 firstRow 放入 carouselData
        }
        this.carouselData = carouselData;
      }
    },
    // 处理选中值变化的方法
    handleSelectChange(selectedValue) {
      console.log("选中的值是: ", selectedValue);
      console.log(this.carouselData);
      // 根据选中的值进行筛选
      if (selectedValue === 1||selectedValue=='1') {
        // 选项1，展示全部数据
        this.filteredProducts = this.topProducts;
      } else if (selectedValue === 2 || selectedValue == '2') {
        // 选项2，展示 top 为 1 的数据
        this.filteredProducts = this.topProducts.filter(product => product.productType === 1);
      } else if (selectedValue === 3 || selectedValue == '3') {
        // 选项3，展示 top 为 2 的数据
        this.filteredProducts = this.topProducts.filter(product => product.productType === 2);
      } else if (selectedValue === 4 || selectedValue == '4') {
        // 选项4，展示 top 为 3 的数据
        this.filteredProducts = this.topProducts.filter(product => product.productType === 3);
      }
      // 对展示数据进行更新，更新时使用的是过滤后的数据
      this.updateCarouselData();}
  },
}
</script>

<style>
/* 布局容器组件 */
.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 150px;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* 创客研发中心字体设置 */
.title-text {
  font-size: 35px;
  /* 设置字体大小为 24px */
  font-weight: bold;
  /* 你还可以设置字体加粗 */
  line-height: 80px;
}

/* 创客实验室已经研发了x个产品样式设置  */
.produce_number_show {
  height: 50px;
  min-height: 36px;
  line-height: 50px;
  text-align: left;
  padding-left: 2%;
  font-size: 20px;
  font-weight: bold;
  /* 你还可以设置字体加粗 */
}

/* 搜索框加选择框 */
.find_and_choice {
  line-height: 30px;
  height: 30;
}

/* 布局组件 */
.el-row {
  margin-bottom: 20px;
  /*
  &:last-child {
    margin-bottom: 0;
  } */
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/* 标杆产品标题  */
.title2 {
  line-height: 50px;
  text-align: left;
  padding-left: 2%;
  font-size: 20px;
  font-weight: bold;
}

/* 分割线样式 */
.el-divider {
  background-color: #80b2de;
}

.el-divider--horizontal {
  height: 5px;
}

/* 标杆产品内容  */
/* 走马灯样式 */
.products {
  display: inline-block;
  /* 让容器宽度自适应内容 */
  width: 100%;
  /* 使其宽度占满父容器 */
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

/* 内容样式 */
/* 定义每页的高度，保持一致的布局 */
.produce_content {
  height: 800px;
  overflow: hidden;
  padding: 20px;
  /* 每页的内边距 */
}

/* Carousel 容器的宽度，最大宽度为 1200px */
.carousel-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 单个 carousel 项目的内容 */
.carousel-content {
  display: flex;
  flex-direction: column;
  /* 图片和文字垂直排列 */
  height: 100%;
  /* 填满父容器的高度 */
  padding: 10px;
  /* 内边距，确保内容不贴边 */
}

/* 每个项的布局 */
.carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 图片和文字居中 */
  justify-content: flex-start;
  /* 使得内容从顶部开始排列 */
  height: 100%;
  padding: 10px;
}

/* 图片样式 */
.product-image {
  width: 100%;
  /* 图片宽度填满容器 */
  height: auto;
  /* 保持图片的比例 */
  object-fit: cover;
  /* 填充容器并裁剪图片 */
  border-radius: 8px;
  /* 圆角效果 */
}

/* 文字描述 */
.product-description {
  text-align: center;
  /* 文字居中 */
  font-size: 14px;
  margin-top: 10px;
  color: #333;
  line-height: 1.5;
}

/* 屏幕尺寸适配 */
@media (max-width: 767px) {
  .product-description {
    font-size: 12px;
    /* 手机屏幕下的文字尺寸 */
  }

  .carousel-item {
    padding: 8px;
    /* 手机屏幕下的内边距 */
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .product-description {
    font-size: 13px;
    /* 平板屏幕下的文字尺寸 */
  }

  .carousel-item {
    padding: 12px;
    /* 平板屏幕下的内边距 */
  }
}

@media (min-width: 1025px) {
  .product-description {
    font-size: 14px;
    /* 大屏幕下的文字尺寸 */
  }

  .carousel-item {
    padding: 14px;
    /* 大屏幕下的内边距 */
  }
}

/* 优秀作品标题  */
.title3 {
  margin-top: 20px;
  line-height: 50px;
  text-align: left;
  padding-left: 2%;
  font-size: 20px;
  font-weight: bold;
}

/*优秀作品内容 */
/* .good_produce_picture {
  margin-top: 20px;
} */
.good_produce_category,
.good_produce_name,
.good_produce_describe {
  line-height: 50px;
  text-align: center;
  padding-left: 2%;
  font-size: 20px;
  font-weight: bold;
}

.good_produce_describe {
  margin-top: 50px;
  padding-left: 20px;
  text-align: left;
}

/* 去除背景颜色 */
.el-header,
.el-footer,
.bg-purple,
.el-main,
.el-carousel__item:nth-child(2n),
.el-carousel__item:nth-child(2n+1) {
  /* background-color: #ffffff; */
  background-color: rgba(255, 255, 255, 0.1);
}
</style>
